<template>
  <div class="title-component">
    {{ title }}
    <a-tooltip placement="right" v-if="isTip">
      <template slot="title">
        <div class="title-component-tip">{{ tipInfo }}</div>
      </template>
      <!-- <img src="@/assets/sentiment/u4205.png" alt="" /> -->
    </a-tooltip>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    props: {
      title: String, //标题
      tipInfo: String, // 鼠标移到问号上的提示信息
      isTip: {
        // 标题右边是否问号，true是有，false没有
        type: Boolean,
        default: true,
      },
    },
  }
</script>
<style lang="less" scoped>
  .title-component {
    padding: 16px 16px 16px 26px;
    font-weight: bold;
    font-size: 16px;
    color: #222;
    border-bottom: 1px solid rgba(233, 233, 233, 1);
    background: #fff;
    position: relative;
    &.title-component-max {
      font-size: 18px;
    }
    &.title-component-min {
      margin-bottom: 30px;
      border: none;
      padding: 0;
      color: #444;
    }
    img {
      width: 26px;
      position: relative;
      top: -2px;
    }
    .mero {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 14px;
      color: #3675f3;
    }
    .graphType {
      float: right;
      width: 120px;
      font-weight: normal;
      margin-right: 20px;
    }
    .tab-bnt {
      position: absolute;
      right: 24px;
      top: 12px;
    }
  }
  .title-component-tip {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
  }
</style>
